import React, { lazy, Suspense } from 'react'
import { createBrowserRouter } from "react-router";

import ProtectRouter from '@/pages/ProtectRouter.jsx'
import Layout from '@/pages/Layout.jsx'

const Home = lazy(() => import("@/pages/Home.jsx"));
const My = lazy(() => import("@/pages/My.jsx"));
const Detail = lazy(() => import("@/pages/Detail.jsx"));
const CheckIsPaySuccess = lazy(() => import("@/pages/CheckIsPaySuccess.jsx"));
const basename = import.meta.env.VITE_Base_URL
export default createBrowserRouter([
  {
    path: "/",
    element: <ProtectRouter></ProtectRouter>,
    children: [
      {
        index: true,
        element: <Layout component={Home} />,
      },
      {

        path: "my",
        element: <Layout component={My} />,
      }
    ]
  },
  {
    path: "/detail",
    element: <Detail></Detail>
  },
  {
    path: "/checkispaysuccess",
    element: <CheckIsPaySuccess></CheckIsPaySuccess>
  },

  // {
  //   path: "/",
  //   loader: homeLoader,

  //   element: <ProtectRouter component={Home}></ProtectRouter>,
  //   handle: { scrollMode: 'pathname', wa: 445566 },
  // },
  // {
  //   path: "/my",

  //   element: <My></My>,
  //   handle: { scrollMode: 'pathname', wa: 998 },
  // },

], {
  basename,
})